<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-05 15:25:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-07-08 11:26:44
 * @FilePath: \vue3-progect\src\views\example\three\geometry\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--缓存几何-->
<template>
	<div :id="id"></div>
</template>

<script setup>
import * as THREE from "three";
import { AxesHelper } from "../../case/helper/AxesHelper";
import { CameraHelper } from "../../case/helper/CameraHelper";
import { WebGLRenderer } from "../../create/renderer";
import { OrbitControlsHelper } from "../../case/helper/OrbitControls";
import { PerspectiveCamera } from "../../create/camera";
import { onMounted } from "vue";

//场景
const scene = new THREE.Scene();
AxesHelper(THREE, scene);
const props = defineProps(["id"]);
onMounted(() => {
	let container = document.getElementById(props.id);

	const camera = PerspectiveCamera(
		THREE,
		90,
		container.offsetWidth / container.offsetHeight,
		0.1,
		1000
	);
	camera.position.z = 200;
	CameraHelper(THREE, scene, camera);
	const renderer = WebGLRenderer(THREE, container);
	OrbitControlsHelper(THREE, scene, camera, renderer);
	// BufferGeometry();
	// BoxGeometry();
	PointMaterial();
	function animate() {
		requestAnimationFrame(animate);
		renderer.render(scene, camera);
	}
	animate();
});

/**
 * 点、线、面、位置颜色
 */
const PointMaterial = () => {
	const vertices = new Float32Array([
		0, 0, 0, 50, 0, 0, 0, 100, 0,

		0, 0, 10, 0, 0, 100, 50, 0, 10
	]);
	const geometry = new THREE.BufferGeometry();
	// 创建属性缓冲区对象
	const attribute = new THREE.BufferAttribute(vertices, 3);
	geometry.setAttribute("position", attribute);

	//点模型
	const material = new THREE.PointsMaterial({
		vertexColors: true, //以顶点颜色为准
		size: 10.0
	});
	const points = new THREE.Points(geometry, material);
	scene.add(points);
	//线模型
	const materialLine = new THREE.LineBasicMaterial({ vertexColors: true });
	const line = new THREE.Line(geometry, materialLine);
	scene.add(line);

	//顶点颜色插值计算
	const colors = new Float32Array([
		1, 0, 0, 0, 1, 0, 0, 0, 1,

		1, 1, 0, 0, 1, 1, 1, 0, 1
	]);
	geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

	const materialLambert = new THREE.MeshBasicMaterial({
		vertexColors: true //以顶点颜色为准
	});
	const mesh = new THREE.Mesh(geometry, materialLambert);
	scene.add(mesh);
};

const BoxGeometry = () => {
	const geometry = new THREE.BoxGeometry();
	const material = new THREE.MeshLambertMaterial({ color: "#ff0000" });
	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	//添加环境光源
	const ambient = new THREE.AmbientLight(0xffffff);
	scene.add(ambient);
	//添加点光源
	var point = new THREE.PointLight(0xffffff);
	point.position.set(100, 100, 100); //点光源位置
	scene.add(point); //点光源添加到场景中
	const sphereSize = 1;
	const pointLightHelper = new THREE.PointLightHelper(point, sphereSize);
	scene.add(pointLightHelper);
};

/**
 * 缓存几何体
 * 1. 几何体
 * 2. 材质
 * 3. 网格
 * 4. 加入场景
 */
const BufferGeometry = () => {
	const vertices = new Float32Array([
		-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
		1.0, -1.0, -1.0, 1.0
	]);
	const geometry = new THREE.BufferGeometry();
	geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
	const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
	const mesh = new THREE.Mesh(geometry, material);
	console.log("geometry:", geometry, "mesh:", mesh);
	scene.add(mesh);
};
</script>

<style lang="less" scoped></style>
